<template>
  <div class="header">
    <div class="header-top">
      <div class="header-container">
        <div class="nav-left">
          <div class="nav-leftbox">
            <p class="nav-menu-hd">网站导航</p>
            <div class="show-box1">
              <dl>
                <dt>特色购物</dt>
                <dd>
                  <p>苏宁互联</p>
                  <p>苏宁互联</p>
                  <p>苏宁互联</p>
                  <p>苏宁互联</p>
                  <p>苏宁互联</p>
                </dd>
              </dl>
            </div>
          </div>
          <div class="nav-leftbox">
            <p class="nav-menu-hd">商家入驻</p>
            <div class="show-box2">
              <a href="#">合作招商</a>
              <a href="#">服务市场</a>
              <a href="#">金融中心</a>
              <a href="#">易通天下</a>
              <a href="#">规则中心</a>
              <a href="#">规则众议院</a>
            </div>
          </div>
          <div class="nav-leftbox">
            <p class="nav-menu-hd">客服服务</p>
            <div class="show-box3">
              <a href="#">苏宁帮客</a>
              <a href="#">退换维修</a>
              <a href="#">意见反馈</a>
              <a href="#">30天包退</a>
              <a href="#">省心购</a>
              <a href="#">电话客服</a>
            </div>
          </div>
          <div class="nav-leftbox">
            <p>网页无障碍</p>
          </div>

          <div class="nav-leftbox">深圳</div>
        </div>
        <ul class="typeList">
          <li><router-link to="/login">请登录</router-link></li>
          <span v-if="name">
            <span>{{ name }}</span>
            <button @click="handleLogout">退出登录</button>
          </span>
          <li class="register">
            <router-link to="/register">注册有礼</router-link>
          </li>
          <li class="nav-rightbox">
            <p>我的订单</p>
            <div class="show-rightbox">
              <a href="#">待支付</a>
              <a href="#">待收货</a>
              <a href="#">待评价</a>
              <a href="#">修改订单</a>
            </div>
          </li>
          <li class="nav-rightbox">
            <p><router-link to="/myshop">我的易购</router-link></p>
            <div class="show-rightbox">
              <a href="#">我的消息</a>
              <a href="#">我的关注</a>
              <a href="#">我的金融</a>
              <a href="#">我的任性付</a>
              <a href="#">我的优惠卷</a>
              <a href="#">苏宁会员</a>
              <a href="#">易付宝</a>
            </div>
          </li>
          <li>苏宁会员</li>
          <li class="nav-rightbox register">
            <a href="#">购物车0</a>
            <div class="show-rightbox"></div>
          </li>
          <li>易付宝</li>
          <li>企业采购</li>
          <li class="nav-rightbox">
            <p>手机苏宁</p>
            <div class="show-rightlastbox"></div>
          </li>
        </ul>
      </div>
    </div>
    </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
export default {

  name: "ZHeader",
  data() {
    return {
      keyword: ''
    }
  },
  methods: {
    ...mapActions('user', ['logout']),
    handleLogout() {
      this.logout()
    }
  },

  computed: {
    ...mapState({
      name: (state) => state.user.name
    })
  }
}
</script>
<style scoped>
.header-top {
  height: 30px;
  background-color: #eaeaea;
}
.header-container,
.buttom {
  width: 1200px;
  height: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  /* align-items: center; */
}
.nav-left {
  padding-top: 6px;
  display: flex;
}
.nav-left .nav-leftbox {
  margin-right: 10px;
  padding-right: 10px;
}
.nav-leftbox {
  position: relative;
}
.nav-menu-hd {
  height: 100%;
  width: 100%;
}
.show-box1 {
  position: absolute;
  display: none;
  width: 988px;
  line-height: 30px;
  color: #999;
  font-size: 12px;
  left: auto;
  top: 22px;
  padding-top: 10px;
  border: 1px solid #ddd;
  background-color: #fff;
  z-index: 21;
  margin-top: 0px;
}
.show-box2 {
  position: absolute;
  display: none;
  top: 22px;
  left: 0;
  line-height: 35px;
  border: 1px solid #ddd;
  background-color: #fff;
  right: auto;
  width: 162px;
  padding-top: 5px;
  padding-bottom: 5px;
  z-index: 21;
}
.show-box2 a {
  display: block;
  line-height: 28px;
  padding-left: 10px;
  width: 71px;
  float: left;
}
.show-box3 {
  position: absolute;
  display: none;
  top: 22px;
  left: auto;
  line-height: 35px;
  border: 1px solid #ddd;
  background-color: #fff;
  right: 0;
  width: 162px;
  /* padding-top: 5px; */
  padding-bottom: 5px;

  z-index: 21;
}
.show-box3 a {
  display: block;
  line-height: 28px;
  padding-left: 10px;
  width: 71px;
  float: left;
}
.nav-leftbox:hover .show-box1 {
  display: block;
  z-index: 99;
}
.nav-leftbox:hover .show-box2 {
  display: block;
  z-index: 99;
}
.nav-leftbox:hover .show-box3 {
  display: block;
  z-index: 99;
}
.typeList {
  padding-top: 6px;
  display: flex;
}
.typeList .register a {
  color: #ff8000;
  text-decoration: none;
}
.typeList li {
  margin-right: 10px;
  padding-right: 10px;
  cursor: pointer;
}
.typeList .nav-rightbox {
  position: relative;
}
.show-rightbox {
  position: absolute;
  display: none;
  top: 22px;
  left: 0;
  line-height: 35px;
  border: 1px solid #ddd;
  background-color: #fff;
  right: auto;
  width: 162px;
  padding-top: 5px;
  padding-bottom: 5px;
}
.show-rightbox a {
  display: block;
  line-height: 28px;
  padding-left: 10px;
  width: 71px;
  float: left;
}
.nav-rightbox:hover .show-rightbox {
  display: block;
  z-index: 26;
}

</style>
